
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="图表, jquery, JSON" />
<meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
<title>使用Highcharts生成柱状图-Helloweba演示平台</title>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<style type="text/css">
.demo{width:650px; height:320px; margin:10px auto}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="js/highcharts/exporting.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_column',
            zoomType: 'xy'
        },
        title: {
            text: '2011-2012年财政支出示意图'
        },
        subtitle: {
            text: '数据来源：新浪财经'
        },
    credits: {
      enabled: false   //右下角不显示LOGO
    },
        xAxis: [{
            categories: ['2010年3月', '2010年4月', '2010年5月', '2010年6月', '2010年7月', '2010年8月', '2010年10月', '2010年11月', '2010年12月', '2011年3月', '2011年4月', '2011年5月', '2011年6月', '2011年7月', '2011年8月', '2011年9月', '2011年10月', '2011年11月'],
      labels: {
        rotation: -45,
        align: 'right'
      }
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                formatter: function() {
                    return this.value + '%';
                },
                style: {
                    color: '#89A54E'
                }
            },
            title: {
                text: ''
            },
            opposite: true

        },
        { // Secondary yAxis
            gridLineWidth: 0,
            title: {
                text: ''
            },
            labels: {
                formatter: function() {
                    return this.value + ' 万亿元';
                },
                style: {
                    color: '#4572A7'
                }
            }

        }],
        tooltip: {
            formatter: function() {
                var unit = {
                    '金额': '亿元',
                    '增幅': '%'
                } [this.series.name];
                return '' + this.x + ': ' + this.y + ' ' + unit;
            }
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 40,
            floating: true,
      shadow: true,
            backgroundColor: '#FFFFFF'
        },
    exporting: {
      enabled: false
    },
        series: [{
            name: '金额',
            color: '#4572A7',
            type: 'column',
            yAxis: 1,
            data: [5923.95, 5575.55, 5786.7, 8119.15, 5810.87, 6413.69, 6488.3, 10599.64, 17982, 7570, 7304.45, 8268, 10809.12, 6949.92, 8076.92, 10018.55, 8079.03, 11396.18]

        },
        {
            name: '金额2',
            color: '#4572cc',
            type: 'column',
            yAxis: 1,
            data: [4923.95, 5375.55, 4786.7, 7119.15, 4810.87, 3413.69, 5488.3, 7599.64, 7982, 8570, 3304.45, 6268, 8809.12, 5949.92, 7076.92, 8718.55, 6479.03, 10396.18]

        },
        {
            name: '增幅',
            color: '#89A54E',
            type: 'spline',
            data: [18.3, 9.8, 25.6, 26.8, 16.6, 35.4, 38.5, 66.9, -10.4, 27.8, 31.0, 42.9, 33.1, 19.6, 25.9, 18.3, 24.5,7.5]
        }]
    });
    
  
  chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_bar',
            defaultSeriesType: 'bar'
        },
        title: {
            text: '2011届毕业生各学院男女比例分配图'
        },
        xAxis: {
      categories: ["\u7ba1\u7406\u5b66\u9662","\u7ecf\u6d4e\u5b66\u9662","\u4fe1\u606f\u5de5\u7a0b\u5b66\u9662","\u827a\u672f\u5b66\u9662","\u5916\u56fd\u8bed\u5b66\u9662"]        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        legend: {
            backgroundColor: '#FFFFFF',
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'percent'
            }
        },
    tooltip: {
      formatter: function() {
        return ''+
        this.series.name +': '+ this.y +' ('+ Math.round(this.percentage) +'%)';
      }
    },
    credits: {
      enabled: false   //右下角不显示LOGO
    },
    exporting: {
      enabled: false
    },
        series: [{
            name: '男生',
      data: [136,147,123,73,84]        },
        {
            name: '女生',
      data: [215,196,41,149,354]        }]
    });

});
</script>
</head>

<body>
<div id="header">
   <div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div>
</div>

<div id="main">
  <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-158.html">使用Highcharts生成柱状图</a></h2>
  
<div id="chart_column" class="demo"></div>

<div id="chart_bar" class="demo"></div>

<div class="ad_demo"><script src="/js/ad_js/ad_demo.js" type="text/javascript"></script></div>
<br/>
</div>
<div id="footer">
    <p>Powered by helloweba.com  允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p>
</div>
<p id="stat"><script type="text/javascript" src="http://js.tongji.linezing.com/1870888/tongji.js"></script></p>
</body>
</html>
